<template>
	<div>
		<el-steps :active="activeStep" simple style="margin-top: 20px">
			<el-step title="申请" :status="step1" icon="el-icon-edit" @click.native="handleStep(1)" style="cursor: pointer"></el-step>
			<el-step title="订单" :status="step3" icon="el-icon-s-order" @click.native="handleStep(3)" style="cursor: pointer"></el-step>
			<el-step title="验收" :status="step4" icon="el-icon-s-check" @click.native="handleStep(4)" style="cursor: pointer"></el-step>
		</el-steps>
		<div class="bodyBox">
			<div class="planTit">{{ showTitle }}</div>
			<div class="bodyRow" v-if="activeStep == 1">
				<div class="bodyInfo">
					<div class="row">申请单号： <a>PA-P25022502</a></div>
					<div class="row">申请单名称： <a>1#、3#副机</a></div>
					<div class="row">申请船舶： <a>华福油5</a></div>
					<div class="row">申请人员： <a>张三-船员</a></div>
					<div class="row">申请部门： <a>轮机部</a></div>
					<div class="row">建议维修类型： <a>航修</a></div>
					<div class="row">申请日期： <a>2025-01-19</a></div>
					<div class="row">预计维修日期： <a>2025-01-20</a></div>
					<div class="row">预计维修地点： <a>黄岐锚地</a></div>
					<div class="row">紧急程度： <a>紧急</a></div>
				</div>
				<div class="bodyDetail">
					<el-timeline>
						<el-timeline-item timestamp="申请" placement="top" type="primary">
							<el-card>
								<h4>申请人：张三-轮机部-船员</h4>
								<p>申请时间：2025/4/12 20:46</p>
								<p>申请附言：-</p>
							</el-card>
						</el-timeline-item>
						<el-timeline-item timestamp="审批" placement="top" type="success">
							<el-card>
								<h4>审批人：李四-轮机部-轮机经理</h4>
								<p>审批时间：2025/4/12 20:46</p>
								<p>审批附言：-</p>
							</el-card>
						</el-timeline-item>
						<el-timeline-item timestamp="审批" placement="top" type="success">
							<el-card>
								<h4>审批人：王五-机务部-机务经理</h4>
								<p>审批时间：2025/4/12 20:46</p>
								<p>审批附言：-</p>
							</el-card>
						</el-timeline-item>
					</el-timeline>
				</div>
			</div>
			<div class="bodyRow" v-if="activeStep == 3">
				<div class="bodyInfo">
					<div class="row">申请单号： <a>PA-P25022502</a></div>
					<div class="row">申请单名称： <a>1#、3#副机</a></div>
					<div class="row">申请船舶： <a>华福油5</a></div>
					<div class="row">申请人员： <a>张三-船员</a></div>
					<div class="row">申请部门： <a>轮机部</a></div>
					<div class="row">建议维修类型： <a>航修</a></div>
					<div class="row">申请日期： <a>2025-01-19</a></div>
					<div class="row">预计维修日期： <a>2025-01-20</a></div>
					<div class="row">预计维修地点： <a>黄岐锚地</a></div>
					<div class="row">紧急程度： <a>紧急</a></div>
					<div class="planTit" style="margin-left: -10px">维修项明细</div>
					<div class="row">维修设备/项目： <a>1#、3#副机</a></div>
					<div class="row">维修原因： <a>排烟管漏烟</a></div>
					<div class="row">备注/要求： <a></a></div>
					<div class="row">船舶初步意见： <a>船舶初步意见</a></div>
					<div class="row">所需备件和物料： <a></a></div>
					<div class="row">维修申请历史： <a>厚六角螺母GB/T6176-2000</a></div>
					<div class="row">操作： <a>已退回 </a></div>

					<!-- <div class="row">合同附件： <el-button type="primary" size="mini" icon="el-icon-s-order">查看</el-button></div> -->
				</div>
				<div class="bodyDetail">
					<el-timeline>
						<el-timeline-item timestamp="维修订单" placement="top" type="warning ">
							<el-card style="width: 500px">
								<h4>经办人：李莉莉-综合部-财务</h4>
								<!-- <p>合同总额：1000(含税)</p>
								<p>合同状态：已签订</p>
								<p>结算状态：待结算</p>
								<p>付款方式：对公付款</p>
								<p>付款时间：-</p> -->
								<!-- <div style="text-align: right">
									<el-button type="danger" size="medium" icon="el-icon-warning" disabled>作废</el-button>
									<el-button type="primary" size="medium" icon="el-icon-s-finance">执行</el-button>
								</div> -->
							</el-card>
						</el-timeline-item>
					</el-timeline>
				</div>
			</div>
			<div class="bodyRow" v-if="activeStep == 4">
				<div class="bodyInfo">
					<div class="row">申请单号： <a>PA-P25022502</a></div>
					<div class="row">申请单名称： <a>1#、3#副机</a></div>
					<div class="row">申请船舶： <a>华福油5</a></div>
					<div class="row">申请人员： <a>张三-船员</a></div>
					<div class="row">申请部门： <a>轮机部</a></div>
					<div class="row">建议维修类型： <a>航修</a></div>
					<div class="row">申请日期： <a>2025-01-19</a></div>
					<div class="row">预计维修日期： <a>2025-01-20</a></div>
					<div class="row">预计维修地点： <a>黄岐锚地</a></div>
					<div class="row">紧急程度： <a>紧急</a></div>
				</div>
				<div class="bodyDetail">
					<el-timeline>
						<el-timeline-item timestamp="审批" placement="top" type="info">
							<el-card>
								<h4>审批人：李四-轮机部-轮机经理</h4>
								<p>审批时间：-</p>
								<p>审批附言：-</p>
							</el-card>
						</el-timeline-item>
						<el-timeline-item timestamp="验收" placement="top" type="info">
							<el-card>
								<h4>验收人：张三-轮机部-船员</h4>
								<p>验收时间：-</p>
								<p>是否入库：-</p>
								<p>验收附言：-</p>
							</el-card>
						</el-timeline-item>
					</el-timeline>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				activeStep: 3,
				step1: "success",
				step2: "success",
				step3: "finish",
				step4: "wait",
				titleList: ["维修申请", "询价管理", "维修订单", "维修验收"],
				showTitle: "维修订单",
			};
		},

		methods: {
			handleStep(index) {
				this.activeStep = index;
				this.showTitle = this.titleList[index - 1];
			},
		},
	};
</script>

<style lang="scss" scoped>
	.bodyBox {
		padding: 20px;
		height: calc(100vh - 120px);
		overflow: auto;
	}

	.bodyRow {
		width: 100%;
		display: flex;

		.bodyInfo {
			padding: 10px;
			width: 400px;
			.row {
				font-size: 15px;
				font-weight: bold;
				color: #606266;
				line-height: 35px;
				box-sizing: border-box;
				a {
					font-size: 14px;
					font-weight: 400;
					color: #777;
				}
			}
		}
	}
</style>
